<template>
	<u-navbar :is-back="false" title="" :background="background">
		<view class="nav_box">
			<u-icon size="36" style="margin-right: 10rpx;" name="arrow-left" @click="handleBack" v-if="isBack"></u-icon>
			<view class="city_sele" v-if="isCity">
				<view class="city_title" @click="handleLoca">
					<view class="title">
						{{locaAddress||'暂无'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view class="city_temperature">
					{{weather}}
				</view>
			</view>
			<view class="nav_search">
				<u-search :value="value" @change='changeVal' @search='handleSearch' @custom='handleSearch'
					:action-style="{height:'64upx',lineHeight:'64upx',width:'118upx',backgroundColor:'#ff0233',borderRadius:'35upx',color:'#fff',fontSize:'28upx'}"
					shape="round" bg-color='#fff' search-icon-color='#FF0435'></u-search>
			</view>
		</view>
		<!-- 	<u-select value-name='lable' label-name='value' v-model="show" mode="mutil-column-auto" :list="cityData"
			@confirm="confirm"></u-select> -->

		<sele title='选择城市' v-model="show" :fieldNames='fieldNames' :options="cityData" @confirm="confirm">
		</sele>
	</u-navbar>
</template>

<script>
	import provinceData from '@/utils/province.js'
	import sele from '@/components/zhilin-cascader_1.1.0/components/zhilin-cascader/zhilin-cascader.vue'
	export default {
		components: {
			sele
		},
		props: {
			isCity: {
				type: Boolean,
				default: false
			},
			isBack: {
				type: Boolean,
				default: false
			},
			weather: {
				type: String,
				default: ''
			},
			locaAddress: {
				type: String,
				default: '暂无',

			},
			value: {
				type: String,
				default: ''
			}
		},
		computed: {

		},
		mounted() {
			this.cityData.unshift({
				label: '01',
				value: '全国',
			})
		},
		data() {
			return {
				fieldNames: {
					label: 'value',
					value: 'value',
					children: 'children'
				},
				cityData: JSON.parse(JSON.stringify(provinceData)),

				show: false,
				// keyword: '',
				background: {
					backgroundColor: '#fff',
				}
			};
		},
		methods: {

			handleBack() {
				uni.navigateBack({

				})
			},
			handleLoca() {
				this.show = true

				return
				uni.chooseLocation({
					success: (res) => {
						const {
							address,
							longitude,
							latitude
						} = res
						if (address) {
							this.$emit('confirm', res.name, res.address)
						}

						// console.log('位置名称：', res, this.form);
						console.log('详细地址：', res);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);	
					}
				});
			},
			confirm(val) {
				if (val.length == 0) {
					return
				}
				const title = val[val.length - 1]
				val = val.map(item => item).join('')
				this.$emit('confirm', title, val == '全国' ? '' : val)
			},
			changeVal(e) {
				this.$emit('input', e)
			},
			handleSearch() {
				// console.log('搜搜')
				this.$emit('handleSearch')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav_box {
		width: 100%;
		padding: 20rpx;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;

		.city_sele {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			margin-right: 10rpx;

			.city_temperature {
				font-size: 18rpx;
				color: #595959;
			}

			.city_title {
				display: flex;
				align-items: center;

				.title {
					font-size: 28rpx;
					color: #000000;
					margin-right: 6rpx;
					white-space: nowrap;
				}
			}
		}

		.nav_search {
			border-radius: 35rpx;
			border: 3rpx solid rgba(255, 54, 93, 100);
			width: 100%;
			padding: 5rpx;
			background-color: #fff;

		}
	}
</style>
